<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基础高德离线地图</title>
    <link th:href="@{/leaflet/leaflet.css}" rel="stylesheet"/>
    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }

        .menuBar {
            position: relative;
            text-align: center;
            top: 10px;
            margin: 0 50px;
            padding: 5px;
            border-radius: 3px;
            z-index: 999;
            color: #ffffff;
            background-color: rgba(0, 168, 0, 1);
        }
    </style>
</head>
<body>
    <div class="map" id="map"></div>
    <div class="menuBar">
        <input type="button" value="开始" onclick="startClick()" />
        <input type="button" value="暂停" onclick="pauseClick()" />
        <input type="button" value="停止" onclick="stopClick()" />
    </div>
</body>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/leaflet/leaflet-src.js}"></script>
<script th:src="@{/js/leaflet.polylineDecorator.js}"></script>
<script th:src="@{/js/AnimatedMarker.js}"></script>
<script type="text/javascript" th:inline="none">
    // 1. 初始化地图
    var map = L.map('map', {
        center: [36.8137, 118.0453],    //淄博
        zoom: 16,
    });
    // 添加底图
    var tiles = L.tileLayer('http://localhost:8088/map/{z}/{x}/{y}.png').addTo(map);

    // 2.点击显示经纬度
    //监听鼠标点击事件，弹出经纬度
    function onMapClick(e) {
        L.popup().setLatLng(e.latlng)
            .setContent('经纬度'+e.latlng.toString())
            .openOn(map)
    };
    map.on('click',onMapClick);


    //3.行驶轨迹
    var latlngs = [         //轨迹坐标
        [36.813683, 118.051615],
        [36.827459, 118.055177],
        [36.829245, 118.01239],
        [36.815057, 118.011274]
    ];
    // 轨迹线
    var routeLine = L.polyline(latlngs, {
        weight: 8
    }).addTo(map);

    // 实时轨迹线
    var realRouteLine = L.polyline([], {
        weight: 5,
        color: '#FF9900'
    }).addTo(map);

    // 轨迹方向箭头
    var decorator = L.polylineDecorator(routeLine, {
        patterns: [{
            repeat: 50,
            symbol: L.Symbol.arrowHead({
                pixelSize: 5,
                headAngle: 75,
                polygon: false,
                pathOptions: {
                    stroke: true,
                    weight: 2,
                    color: '#FFFFFF'
                }
            })
        }]
    }).addTo(map);

    var markers = [];
    var carIcon = L.icon({
        iconSize: [37, 26],
        iconAnchor: [19, 13],
        iconUrl: '/images/car.png'
    })

    var animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
        icon: carIcon,
        isRotate: true,
        playCall: updateRealLine
    }).addTo(map)

    var newLatlngs = [routeLine.getLatLngs()[0]]

    function updateRealLine(latlng) {
        newLatlngs.push(latlng)
        realRouteLine.setLatLngs(newLatlngs)
    }

    //开始
    function startClick() {
        animatedMarker.start();
    }

    //暂停
    function pauseClick() {
        animatedMarker.pause();
    }

    //停止
    function stopClick() {
        newLatlngs = []
        animatedMarker.stop();
    }
</script>
</html>